<script setup lang="ts">
import { ref } from 'vue'
import { showImagePreview } from 'vant'
import TopNavWithHidden from '@/components/TopNavWithHidden/index.vue'
import BlockCard from '@/components/BlockCard.vue'
import Price from '@/components/Price.vue'

const activeTab = ref<number>(0)
const imgList = ref<string[]>([
  'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg',
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
])
const clickImg = (index: number) => {
  showImagePreview({
    images: imgList.value,
    startPosition: index,
  })
}
</script>
<template>
  <div class="product-detail">
    <!-- 顶部操作栏 -->
    <TopNavWithHidden>
      <div style="width:300px">
        <van-tabs v-model:active="activeTab">
          <van-tab title="商品" name="product" />
          <van-tab title="详情" name="detail" />
          <van-tab title="推荐" name="recommend" />
        </van-tabs>
      </div>
    </TopNavWithHidden>

    <!-- 头部轮播 -->
    <div class="swipe-top">
      <van-swipe :autoplay="0" lazy-render>
        <van-swipe-item v-for="(image, index) in imgList" :key="image" @click="clickImg(index)">
          <img :src="image" />
        </van-swipe-item>
        <template #indicator="{ active, total }">
          <div class="custom-indicator mask_tip_content">{{ active + 1 }} / {{ total }}</div>
        </template>
      </van-swipe>
    </div>

    <span></span>
    <!-- 商品详情 -->
    <div class="product-detail-content">
      <BlockCard>
        <Price value="20.00" :integerSize="50" :size="30" />
        <div>
          <span class="title-234">这是商品的主标题，最多只展示两行，我会给一个下拉按钮，点击后不限制两行</span>
        </div>
      </BlockCard>
      <van-cell-group inset class="product-detail-spec">
        <van-cell title="规格选择" is-link>
          <template #title>
            <div>选择规格</div>
            <!-- 以下是预览图 展示三个 -->
            <img v-for="item in imgList.slice(0, 3)" :src="item" :key="item" />
          </template>
        </van-cell>
        <van-cell icon="logistics" title="发货地：宜昌" label="付款后3天内发货" />
      </van-cell-group>
      <BlockCard>
        这是商品详情
      </BlockCard>
      <BlockCard>
        这是推荐瀑布流商品
      </BlockCard>
    </div>

    <!-- 底部操作栏 -->
    <van-action-bar>
      <van-action-bar-icon icon="chat-o" text="客服" />
      <van-action-bar-icon icon="cart-o" badge="5" text="购物车" />
      <van-action-bar-button color="#be99ff" type="warning" text="加入购物车" />
      <van-action-bar-button color="#7232dd" type="danger" text="立即购买" />
    </van-action-bar>
  </div>
</template>
<style lang="scss" scoped>
.product-detail {
  img {
    display: block;
    height: 100vmin;
    width: 100vmin;
    object-fit: contain;
  }
  img[src=""], img:not([src]) {
    background: url('../../assets/default_product.jpg') no-repeat center;
    background-size: 100% 100%;
  }
  .swipe-top {
    background: rgba(0, 0, 0, 0.85);
  }
  .custom-indicator {
    position: absolute;
    right: var(--border-space);
    bottom: 10px;
    padding: 2px 10px;
    border-radius: 10px;
    // font-size: 34px;
  }
  .product-detail-content {
    // 底部操作栏高度影响
    padding-bottom: 150px;
    .product-detail-spec {
      img {
        width: 100px;
        height: 100px;
        margin-right: 10px;
        object-fit: cover;
        display: inline-block;
      }
    }
  }
}
</style>